<template>
  <div class="container">
    <!-- <span class="title">检测商品类别</span> -->
    <div id="exhartP" ref="itemRef" style="width: 45%; height: 100%"></div>
    <div id="exhartB" style="width: 55%; height: 100%"></div>
  </div>
</template>
<script>
import * as echarts from "echarts";
import { getYsyxphbByMarketATy, getJcspLbByMarketATy } from "../../util/home";
export default {
  name: "",
  components: {},
  mixins: [],
  props: {},
  data() {
    return {
      option1: {},
      option2: {},
    };
  },
  computed: {},
  watch: {},
  mounted() {
    this.getInit();
    this.getInit2();
  },
  methods: {
    async getInit() {
      let dataList = [];
      await getJcspLbByMarketATy().then((res) => {
        res.data.data.forEach((item) => {
          dataList.push({
            name: item.name,
            value: item.bfb.replace("%", ""),
          });
        });
      });
      let chartDom = this.$refs.itemRef;
      this.myChart = echarts.init(chartDom, null, {
        devicePixelRatio: 2.5,
      });
      this.option = {
        title: {
          text: "检测商品类别",
          top: 0,
          left: 0,
          textStyle: {
            color: "#fff",
            fontSize: 14,
            fontWeight: "600",
          },
        },
        // color: ['#00b1f2', '#ff921d', '#7bed75', '#4df9ff', '#e8ff7f'],
        legend: {
          show: true,
          bottom: "0%",
          width: 250,
          data: dataList,
          itemWidth: 12,
          itemHeight: 12,
          // width: 50,
          padding: [0, 5],
          itemGap: 6,
          formatter: (name) => {
            let data = dataList;
            let total = 0;
            let tarValue;
            for (let i = 0; i < data.length; i++) {
              total += data[i].value;
              if (data[i].name == name) {
                tarValue = data[i].value;
              }
            }
            let v = tarValue;
            //计算出百分比
            return `${name}  ${v}% `;
            //name是名称，v是数值
          },
          textStyle: {
            color: "#fff",
            fontSize: 10,
            rich: {
              title: {
                fontSize: 10,
                lineHeight: 10,
                color: "#fff",
              },
              value: {
                fontSize: 12,
                lineHeight: 12,
                color: "#fff",
              },
            },
          },
        },
        series: [
          {
            zlevel: 1,
            type: "gauge",
            radius: "56%",
            center: ["50%", "40%"],
            startAngle: "360",
            endAngle: "0",
            min: 0,
            max: 100,
            pointer: {
              show: false,
            },
            detail: {
              show: false,
            },
            data: [
              {
                value: 1,
              },
            ],

            axisLine: {
              show: true,
              lineStyle: {
                color: [[1, "#2E486A"]],
                width: 2,
                opacity: 1,
              },
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              show: false,
              length: -44,
              lineStyle: {
                color: "#051932",
                width: 0,
                type: "solid",
              },
            },
            axisLabel: {
              show: false,
            },
          },
          {
            type: "gauge",
            radius: "65%",
            center: ["50%", "40%"],
            splitNumber: 80,
            startAngle: 360,
            endAngle: 0,
            hoverAnimation: true,
            axisTick: {
              show: false,
            },
            splitLine: {
              show: true,
              length: 5,
              lineStyle: {
                width: 2,
                fontWeight: 400,
                color: "#1A2D78",
              },
            },

            axisLabel: {
              show: false,
            },
            pointer: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            detail: {
              show: false,
            },
          },
          {
            type: "pie",
            hoverAnimation: true,
            hoverOffset: 25,
            startAngle: 180, //起始角度
            clockwise: false, //是否顺时针
            radius: ["30%", "40%"],
            center: ["50%", "40%"],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 0,
              borderColor: "#121B43",
              borderWidth: 2,
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "18",
                formatter: (params) => {
                  return `{name|${params.percent}%}\n{value|${params.name}}`;
                },
                rich: {
                  name: {
                    fontSize: 15,
                    lineHeight: 18,
                    color: "#fff",
                    fontWeight: 600,
                  },
                  value: {
                    color: "#a7a9c7",
                    fontSize: 12,
                    lineHeight: 10,
                    color: "#fff",
                  },
                },
              },
            },
            label: {
              show: false,
              position: "center",
              color: "rgba(13, 17, 29,0)",
            },
            labelLine: {
              show: false,
            },
            data: dataList,
            zlevel: 30,
          },
          {
            zlevel: 1,
            type: "gauge",
            radius: "25%",
            center: ["50%", "40%"],
            startAngle: "360",
            endAngle: "0",
            min: 0,
            max: 100,
            pointer: {
              show: false,
            },
            detail: {
              show: false,
            },
            data: [
              {
                value: 1,
              },
            ],

            axisLine: {
              show: true,
              lineStyle: {
                color: [[1, "#2E486A"]],
                width: 2,
                opacity: 1,
              },
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              show: false,
              length: -44,
              lineStyle: {
                color: "#051932",
                width: 0,
                type: "solid",
              },
            },
            axisLabel: {
              show: false,
            },
          },
        ],
      };
      this.myChart.clear();
      // 设置实例参数
      this.myChart.setOption(this.option);
      let index = 0;
      let lastIndex = 0;
      setInterval(() => {
        // 取消上一个数据项的高亮效果
        if (index > 0) {
          this.myChart.dispatchAction({
            type: "downplay",
            seriesIndex: 2,
            dataIndex: lastIndex,
          });
        }
        this.myChart.dispatchAction({
          type: "highlight",
          seriesIndex: 2,
          dataIndex: index,
        });
        lastIndex = index;
        ++index;
        if (index > dataList.length) {
          index = 0;
        }
      }, 3000);
    },
    getInit2() {
      getYsyxphbByMarketATy().then((res) => {
        let datas = res.data.data;
        this.option2 = {
          // backgroundColor: "#010A31",
          title: {
            text: "疑似阳性数排行榜",
            textStyle: {
              fontSize: 14,
              color: "#fff",
            },
          },
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "shadow",
            },
          },
          grid: {
            right: "3%",
            left: "10%",
            bottom: "10%",
            height: "70%",
          },
          xAxis: [
            {
              type: "category",
              data: datas.map((e) => e.name),
              axisLine: {
                lineStyle: {
                  color: "#3A67A1",
                  //  type: 'dashed',
                },
              },
              axisLabel: {
                show: true,
                color: "#fff",
                fontSize: 10,
                interval: 0,
                formatter: function (val) {
                  var strs = val.split(""); //字符串数组
                  var str = "";
                  for (var i = 0, s; (s = strs[i++]); ) {
                    //遍历字符串数组
                    str += s;
                    if (!(i % 4)) str += "\n"; //按需要求余
                  }
                  return str;
                },
              },
              axisTick: {
                show: false,
              },
            },
          ],
          yAxis: [
            {
              type: "value",
              // name: "单位：人",
              nameTextStyle: {
                color: "#fff",
                fontSize: 16,
              },
              axisLabel: {
                formatter: "{value}",
                color: "#fff",
              },
              axisTick: {
                show: false,
              },
              splitLine: {
                show: true,
                lineStyle: {
                  // type: 'dashed',
                  width: 1,
                  color: "#203C6D",
                },
              },
              axisLine: {
                show: true,
                lineStyle: {
                  color: "#3A67A1", // "rgba(0,186,255,.6)"
                },
              },
            },
          ],
          series: [
            {
              type: "bar",
              data: datas.map((e) => e.bhgsum),
              barWidth: "10px",
              itemStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(
                    0,
                    0,
                    0,
                    1,
                    [
                      {
                        offset: 0,
                        color: "#76F962", // 0% 处的颜色
                      },
                      {
                        offset: 1,
                        color: "#41C9FF", // 100% 处的颜色
                      },
                    ],
                    false
                  ),
                  // shadowColor:  "rgba(0,160,221,1)",
                  // shadowBlur: 4
                },
              },
              label: {
                normal: {
                  color: "#fff",
                  show: true,
                  formatter: "{c}",
                  position: "top",
                },
              },
            },
          ],
        };
        var myChart = echarts.init(document.getElementById("exhartB"), null, {
          devicePixelRatio: 2.5,
        });
        myChart.setOption(this.option2);
      });
    },
  },
};
</script>
<style lang="less" scoped>
.container {
  height: 100%;
  display: flex;
  position: relative;

  .title {
    top: 5px;
    font-size: 14px;
    color: #fff;
    position: absolute;
  }
}
</style>
